<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>识别二维码demo</title>
  </head>
  <body>
    <!-- 显示图片的标签容器 -->
    <div class="img-container">
      <!-- 本地二维码文件（注意需要在服务器上运行此代码才能解析） -->
      <!-- <img id="qrcodeImg" src="./WechatIMG20.png" alt="" /> -->
      <!-- 网络二维码文件 -->
      <img
        id="qrcodeImg"
        src="https://img1.baidu.com/it/u=2877499757,3239316825&fm=224&fmt=auto&gp=0.jpg"
        alt=""
      />
    </div>
    <!-- 显示解析结果的容器 -->
    <div id="result"></div>
    <button onclick="extractQRcode()">识别</button>
  </body>
  <!-- 必要依赖文件 qrcode -->
  <!-- <script src="./test.js"></script> -->
  <!-- <script src="./qrcode.lib.min.js"></script> -->
  <!-- <script type="text/javascript" src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script> -->
  <!-- <script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script> -->
  <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

  <!-- 识别二维码 -->
  
  <script>
    // 将图片转化成base64
    function getImgToBase64(url, callback) {
      //将图片转换为Base64
      let canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      const img = new Image();
      // 开启跨域模式
      img.crossOrigin = "Anonymous";
      img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        const dataURL = canvas.toDataURL("image/png");
        callback(dataURL);
        canvas = null;
      };
      img.src = url;
    }
    // 将base64转化为file对象
    function dataURLtoFile(dataurl, filename = "test.png") {
      //将base64转换为文件
      let arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    }
    // 生成blob地址url
    function getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    }
    // 执行识别
    function extractQRcode() {
      let imgUrl = document.querySelector("#qrcodeImg").src || "";
      // 将图片转化成base64格式
      getImgToBase64(imgUrl, (data) => {
        // 将base64数据转化为file对象
        let file = dataURLtoFile(data);
        // 将file对象转化为临时url地址
        let url = getObjectURL(file);
        // 执行二维码解析
        const qrcode = new QRCode(document.querySelector("#qrcodeImg"),'test')
        qrcode.decode(url);
        // 在回调中获取结果
        qrcode.callback = function (data) {
          let resultContainer = document.querySelector("#result");
          resultContainer.innerHTML = data;
          console.log("识别信息：" + data);
        };
      });
    }
    // 读取本地图片
  </script>
  <style>
    .img-container {
      width: 100px;
      height: 100px;
    }
    .img-container img {
      width: 100%;
      height: 100%;
    }
  </style>
</html>
